$(document).ready(function() {
	var intCoverId 	= $('#pcoverid').val();
	var intTop		= $('#ptop').val(); 
	$.globalVars = {
		originalTop: 0,
		originalLeft: 0,
		maxHeight: $("#draggable").height() - $(".cus").height(),
		maxWidth: $("#draggable").width() - $(".cus").width()
	};
	if(intTop != 0) {
		$('#draggable').css('top', intTop + 'px');
	}
	$("#draggable").draggable({
		axis:'y',
		cursor: 'move',
		start: function(event, ui) {
			$('#canvas').show();
			if (ui.position != undefined) {				
				$.globalVars.originalTop = ui.position.top;
				$.globalVars.originalLeft = ui.position.left;
			}
		},
		drag: function(event, ui) {
			$('#canvas').hide();
			var newTop = ui.position.top;
			var newLeft = ui.position.left;
			if (ui.position.top < 0 && ui.position.top * -1 > $.globalVars.maxHeight) {
				newTop = $.globalVars.maxHeight * -1;
			}
			if (ui.position.top > 0) {
				newTop = 0;
			}
			if (ui.position.left < 0 && ui.position.left * -1 > $.globalVars.maxWidth) {
				newLeft = $.globalVars.maxWidth * -1;
			}
			if (ui.position.left > 0) {
				newLeft = 0;
			}
			ui.position.top = newTop;
			ui.position.left = newLeft;
		},
		stop: function(event, ui) {
			var xPos = 0;
			var yPos = Math.abs(ui.position.top);	
			var tPos = ui.position.top;			
			$('#canvas').show();
			$('#canvas').html('<span>Đang lưu vị trí, bạn vui lòng chờ trong giây lát.</span>');				
			$.getJSON(				
				HOST_VFRIEND + 'ajax/cover?coverid='+intCoverId+'&xc='+xPos+'&yc='+yPos+'&top='+tPos+'&callback=?',		
				function(response) {
					$('#ptop').val(tPos);
					$('#canvas').html('<img src="'+HOST_STATICS+'img/bg/position.png" width="145" height="40" alt="Save position for cover image" />');										
				}
			);			
		}
	});	
	//drapCover(intCoverId,intTop);		
});
function drapCover(iCoverId, intTop) {	
		
}